<template>
	<view class="box-padding" style="--px: 26rpx">
		<!-- 选择门店组件 -->
		<select-stores :active="active" :stores="shopList" @storeschange="handleStoresItem"></select-stores>
		<!-- 选择课程 -->
		<view class="box" v-if="active >= 0">
			<view class="box-title flex vertical-center fn-25 fn-w hairline--bottom">
				<image style="width: 49rpx;" src="../../../static/icon/kecheng.png" mode="widthFix"></image>
				可试课课程
			</view>
			<view class="list">
				<view class="item flex align-between vertical-center fn-22" :class="{ active: c_id == item.id }" v-for="(item, index) in courseList"
				 :key="index" @click="handleCourseItem(item)">
					<!-- 课程信息 -->
					<view class="flex-1 fn-22 flex-column">
						<text class="mb-20">{{ item.c_name || "课程名称" }}</text>
						<text class="mb-20">{{ item.s_name }}</text>
						<text>{{ item.s_address }}</text>
					</view>
					<!-- 教师信息 -->
					<view class="col-4 flex-column vertical-center">
						<image style="width: 69rpx; height: 69rpx;border-radius: 50%;" :src="item.t_img" mode=""></image>
						<view class="mt-20 fn-22">
							<text>名师</text>
							<text class="ml-10">{{ item.t_name }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 申请下一步 -->
		<view style="margin: auto;margin-top: 60rpx;">
			<v-button @onclick="onClickComplete">下一步</v-button>
		</view>
		<!-- 课程详情组件 -->
		<courseDetail v-if="isCourseDetail" :course="course" @back="isCourseDetail = false" @next="onNextStep" />
	</view>
</template>

<script>
	import {
		toast
	} from '@/utils/util.js';
	import vButton from '@/components/button/button.vue';
	import courseDetail from './course-detail.vue';
	import selectStores from '@/components/select-stores/select-stores.vue';
	import HomeApi from '@/api/home.js';

	export default {
		components: {
			vButton,
			courseDetail,
			selectStores
		},
		data() {
			return {
				active: 0, // 选择门店的索引
				course: null, // 课程详情信息
				shop_id: '', // 门店id
				c_id: '', // 课程id
				isCourseDetail: false, // 是否展示课程详情
				courseList: [],
				shopList: []
			};
		},
		computed: {
			isComplete() {
				return Boolean(this.c_id);
			}
		},
		onLoad(e) {
			this.postAccreditPhone(e.id || 0);
		},
		methods: {
			// 获取我要预约页面数据
			async postAccreditPhone(id = 0) {
				const res = await HomeApi.PostAccreditPhone({id})
				this.shopList = res.shop_list;
				this.courseList = res.course_list;
			},
			// 点击门店列表项选择门店下课程
			handleStoresItem({
				index,
				item
			}) {
				if (this.active != index) {
					this.active = index;
					this.shop_id = item.id;
					this.courseList = [];
					this.postAccreditPhone(this.shopList[index].id)
				}
			},

			// 点击课程item选择
			handleCourseItem(item) {
				this.c_id = item.id;
				this.course = item;
			},

			// 下一步查看门店详情
			onClickComplete() {
				if (!this.isComplete) {
					toast('请选择门店');
					return;
				}
				// 展示课程详情
				this.isCourseDetail = true;
			},

			// 申请选择试课时间
			onNextStep() {
				let shop_id = this.shop_id || this.shopList[this.active].id;
				let c_id = this.c_id;
				let timetable = JSON.stringify(this.course.timetable);
				this.onGoNext(`/pages/make-apply/third-step/third-step?shop_id=${shop_id}&c_id=${c_id}&timetable=${timetable}&r_name=${this.course.r_name}`);
			}
		}
	};
</script>

<style lang="scss" scoped>
	.box {
		background-color: $color-white;
		box-shadow: 3rpx 3rpx 10rpx rgba(#eee, 0.1);
		padding: 20rpx;
		border-radius: 5rpx;
		margin-bottom: 30rpx;

		&-title {
			padding-bottom: 20rpx;
		}

		.list {
			.active {
				background-color: $color-primary !important;
			}

			.item {
				margin-top: 24rpx;
				border: 2rpx solid #c6c6c6;

				padding: {
					top: 20rpx;
					bottom: 20rpx;
					left: 43rpx;
				}

				background-color: #f7f5f3;
			}
		}
	}

	.button {
		width: var(--width);
		height: 94rpx;
		border-radius: 10rpx;
		color: $text-color;
		background-color: $color-primary;
		font-size: 30rpx;
		box-shadow: 6rpx 6rpx 8rpx rgba($color-primary, 0.3);
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;

		&:active {
			background-color: darken($color: $color-primary, $amount: 20);
			transform: translate(1px, 1px);
		}
	}
</style>
